﻿<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>控制台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- basic styles -->
    <div th:replace="common/header::header"></div>
    <script src="/static/js/user.js" type="application/javascript"></script>
</head>

<body>
<div class="main-container" id="main-container">
    <div class="">
        <div>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="/home">首页</a>
                </li>
                <li class="active">用户管理</li>
            </ul><!-- .breadcrumb -->
            <button class="btn btn-sm btn-primary" onclick="window.location.reload()" style="margin-top: 5px">
                <i class="icon-refresh"></i>
                刷新
            </button>
        </div>

        <div class="page-content">
            <div class="page-header">
                <h1>
                    用户列表
                </h1>
            </div><!-- /.page-header -->
            <div class="row">
                <div class="col-xs-12" style="margin-bottom: 10px">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="table-responsive">
                        <div class="col-xs-3">
                            <a class="btn btn-sm btn-success" href="/user/add" target="mainFrame">
                                <i class="icon-plus"></i>
                                新增用户
                            </a>
                            <button class="btn btn-sm btn-danger" id="btn-delete-batch">
                                <i class="icon-trash"></i>
                                批量删除
                            </button>

                            <a class="btn btn-sm btn-danger" id="btn-export" href="/user/exportUseTemplate">
                                <i class="glyphicon-export"></i>
                                导出用户列表
                            </a>
                        </div>
                        <div class="col-xs-3">
                            <form class="form-search pull-right" action="/user/search" method="get">
                                <div class="input-group">
                                    <input type="text" name="keyword" class="form-control search-query"
                                           placeholder="查找内容" th:value="${keyword}">
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-purple btn-sm">
                                            查找
                                            <i class="icon-search icon-on-right bigger-110"></i>
                                        </button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">

                    <table id="user-table" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr class="center">
                            <th class="center">
                                <a id="btn-all">全选</a>
                                <a id="btn-not">全不选</a>
                                <a id="btn-rev">反选</a>
                            </th>

                            <th class="center">id</th>
                            <th class="center">用户名</th>
                            <th class="center">用户头像</th>
                            <th class="center">创建时间</th>
                            <th class="center">更新时间</th>
                            <th class="center">操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="user : ${pageInfo.getList()}">
                            <td class="center">
                                <label>
                                    <input th:id="${user.id}" type="checkbox" class="ace"/>
                                    <span class="lbl"></span>
                                </label>
                            </td>
                            <td class="center" th:text="${user.id}">1</td>
                            <td class="center" th:text="${user.username}">min</td>
                            <td th:text="${user.avatar}">/1.pic</td>
                            <td class="center" th:text="${#dates.format(user.created, 'yyyy-MM-dd HH:mm:ss')}">
                                2010-01-01 12:00:00
                            </td>
                            <td class="center" th:text="${#dates.format(user.updated, 'yyyy-MM-dd HH:mm:ss')}">
                                2010-01-01 12:00:00
                            </td>

                            <td class="center">
                                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group ">
                                    <a class="btn btn-xs btn-info" th:href="@{/user/view(id=${user.id})}">
                                        <i class="icon-info-sign bigger-120"> 查看</i>
                                    </a>
                                    <a class="btn btn-xs btn-info" th:href="@{/user/edit(id=${user.id})}">
                                        <i class="icon-edit bigger-120"> 编辑</i>
                                    </a>

                                    <button class="btn btn-xs btn-danger btn-delete" th:value="${user.id}">
                                        <i class="icon-trash bigger-120"> 删除</i>
                                    </button>
                                    <button type="button" class="btn btn-xs btn-default" data-toggle="modal"
                                            data-target="#modal-default"
                                            th:onclick="updateShowModal([[${user.id}]]);">
                                        <i class="icon-info-sign bigger-120"> 模态框查看</i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--********************分页部分************************-->
                <!--比较好看的分页-->
                <div class="col-xs-12 center">
                    <!--url地址可以作为参数传入-->
                    <div th:if="${keyword eq null || keyword==''}">
                        <div class="pull-left" th:replace="common/page::pagination('/user/list')"></div>
                    </div>
                    <div th:if="${(keyword ne null) and (keyword ne '')}">
                        <div class="pull-left"
                             th:replace="common/page::pagination('/user/search?keyword='+${keyword})"></div>
                    </div>
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.row -->
        </div><!-- /.page-content -->
    </div><!-- /.main-container -->
</div>
<!-- basic scripts -->
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="id"> ID </label>
                        <div class="col-sm-9">
                            <input readonly="true" type="text" class="col-xs-2 col-sm-2" id="id" name="id"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="username"> 用户名 </label>
                        <div class="col-sm-9">
                            <input type="text" id="username" name="username" placeholder="Username"/>
                        </div>
                    </div>

                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" name="password"
                               for="password">密码 </label>
                        <div class="col-sm-9">
                            <input type="password" id="password" name="password" placeholder="Password"/>
                        </div>
                    </div>

                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="avatar"> 头像 </label>
                        <div class="col-sm-9">
                            <input type="text" id="avatar" name="avatar" placeholder="avatar"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<footer>
    <div th:replace="common/footer::footer_js"></div>

    <!--<div th:replace="common/footer::footer_text"></div>-->
</footer>
</html>

